<template>
  <div class="container">
    <el-scrollbar>
      <h4></h4>
      <div class="mainbox">
        简单的用vue对商品管理功能做了一个迁移，下面我说一下自己对功能开发的理解，vue也有类似于充电桩上页面引入的方式，但主流依然是用脚手架的方式引入，页面用了一个ElementPlus的UI框架，在最初用mui框架时龙哥曾经问过我一个问题，我觉得是常识，但好像不是，简单说一下UI框架的作用，他定义了一下基础的样式，例如按钮提示等等，它使你的样式页面有了一个下限，我也尝试着模仿其规范性对一些样式做了修改
      </div>
      <div
        class="mainbox"
        style="display: flex; justify-content: space-between"
      >
        <el-card
          class="box-card"
          :style="'color:#fff;background:' + layout['menu-background-color']"
        >
          菜单背景色
        </el-card>
        <el-card
          class="box-card"
          :style="'color:#000;background:' + layout['menu-text-color']"
        >
          文字默认颜色
        </el-card>
        <el-card
          class="box-card"
          :style="'color:#fff;background:' + layout['menu-active-text-color']"
        >
          文字选中颜色
        </el-card>
        <el-card
          class="box-card"
          :style="
            'color:#fff;background:' + layout['menu-inline-hover-background']
          "
        >
          二级菜单颜色
        </el-card>
      </div>
      <div class="mainbox">
        这样做有哪些好处呢？其实就是一个规范，后续ui风格变化直接修改这个色彩文件就好。
      </div>
      <el-breadcrumb separator="/" style="margin: 10px 0">
        <el-breadcrumb-item>过渡动画</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mainbox">
        过渡动画是vue的一个强大的功能，虽然我也不是很熟悉动画制作但一些简单的动画可以让页面变得和谐
        <el-switch
          v-model="transitionfalg"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="transitionfalgchange"
        />
        这个按钮控制了路由跳转和左侧的收起方式的动画。
      </div>
      <el-breadcrumb separator="/" style="margin: 10px 0">
        <el-breadcrumb-item>组件化开发</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mainbox">
        在之前的页面中也可以使用组件例如选择区域里动态获取区域，angular里传参作用域比较复杂，我个人对angular也是在页面里用其模板语法，并没有深入的去了解他，vue开发组件更顺手或者说用脚手架开发更顺手，在商品管理中所有的表单包括搜索表单添加表单都是用的同一个组件，里面集成的地图富文本和图片选择器让再次调用变得更简单。
      </div>
      <el-breadcrumb separator="/" style="margin: 10px 0">
        <el-breadcrumb-item>关于表单</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mainbox">
        咱们一直期望的是每个值都在表单中验证然后提示给用户，在以前的样式中这个不是不能实现但是太复杂，繁琐浪费时间，而且做出的效果差强人意，elmui自带的表单验证系统让这个功能变得那么简单，我在金额框里做了个金额的正则验证和提示，还有就是关于金额的计算，之前我的方式是在显示时除100上传时乘100，看似很简单的东西页面多了或者自己写错了就很麻烦，现在这个操作由这个组件自己完成，他自己会在显示金额时除一百，显示地址是自动把字符串改成地理坐标，而在我获取时又自动转换成我想要的东西，这样的一次修改终身受用的开发就是我所期望的，之后一个耗时的效果因为重复调用变得简单，使得其制作有了更高的价值。关于表单的重复利用在商品管理里有三个表单他们分别是添加修改和搜索表单，他们都是同一个表单组件展示的效果。
      </div>
      <el-breadcrumb separator="/" style="margin: 10px 0">
        <el-breadcrumb-item>关于稳定性</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mainbox">
        打包之后是个压缩的单文件，每次修改后龙哥觉得应该测试所有功能然后上线，可以把部分重要用户单独做一个项目，但是出问题后一面是新功能一面是功能修改，难免引起冲突，还有一种版本控制工具是git，他可以保存每次上传记录。这是我此时此刻想到的一个解决方法。
      </div>
      <el-breadcrumb separator="/" style="margin: 10px 0">
        <el-breadcrumb-item>关于与现在页面的结合</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mainbox">
        理论上是可以的因为他本质上还是一个html文件，但是风格变化和cdz上我写了一下方法都不再有效时间会更长
      </div>
      <el-breadcrumb separator="/" style="margin: 10px 0">
        <el-breadcrumb-item>关于开发效率</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mainbox">
        在制作cdz页面是明显感到我可能比刚来公司时做的更快，但是还是时有bug，这一方面是熟练的原因更重要的是一些方法已经写好了，我只要调用就行了，vue中也能用很多第三方的方法例如那个富文本编辑器，累死我也写不出来，vue的可扩展性修改难易程度更好，开发效率刚开始可能会慢一点，但随着我组件功能越写越多，最终效率应该比现在更快。
      </div>
      <el-breadcrumb separator="/" style="margin: 10px 0">
        <el-breadcrumb-item>关于岗位</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mainbox">
        我的岗位主要职责是把龙哥的接口路畅的界面做一个结合，理想上我思考的是功能实现的便利性，我们也面试了两个前端，虽然他们不会或者不熟悉vue但他们依然号称自己是vue开发，因为现在vue就是前端开发的主流，我的工作职责就是尽可能的把老板的想法实现，然后告诉老板我会什么，我能做出个什么东西来，用vue写可以让后来者即使不知道我写的是什么依然不影响使用它
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
  import layout from '@/styles/layout.scss'

  console.log(layout)
  //   //横向布局纵向布局时菜单背景色
  //   menu-background-color: $menu-background-color;
  // menu-text-color: $menu-text-color;
  // menu-active-text-color: $menu-active-text-color;
  // menu-inline-hover-background:$menu-inline-hover-background;
  export default {
    data() {
      return {
        show: true,
        transitionfalg: this.$store.getters['settings/transitionfalg'],
      }
    },
    computed: {
      layout() {
        return layout
      },
    },
    methods: {
      transitionfalgchange() {
        this.$store.commit('settings/transitionfalgfn', this.transitionfalg)
      },
    },
  }
  // background: $background-color;
</script>
<style lang="scss" scoped>
  @import 'src/styles/index';
  .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #00ff00;*/
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 10px solid $background-color;
    border-top: 0;
  }
  .mainbox {
    font-size: 14px;
    color: #000000;
    padding: 10px;
  }
  .box-card {
    width: 20%;
  }
</style>
